<template>
	<div class="mainRight">
		<el-form
			ref="ruleForm"
			class="ruleForm"
			:model="ruleForm"
			label-width="80px"
			inline
			size="medium"
		>
			<el-form-item label="年份:">
				<el-select v-model="ruleForm.year" placeholder="请选择">
					<el-option
						v-for="item in yearList"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					>
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="月份:">
				<el-select v-model="ruleForm.month" placeholder="请选择">
					<el-option
						v-for="item in monthList"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					>
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="分类:">
				<el-select v-model="ruleForm.ranking" placeholder="请选择">
					<el-option label="总排行" :value="1"> </el-option>
					<el-option label="支部排行" :value="2"> </el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="申报对象:">
				<el-input
					v-model="ruleForm.name"
					placeholder="请输入申报对象"
				></el-input>
			</el-form-item>
			<el-form-item label="组织:">
				<!-- 这里可以采用级联菜单的形式展示。 -->
				<el-select v-model="ruleForm.month" placeholder="请选择">
					<!-- <el-option
            v-for="item in monthList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option> -->
				</el-select>
			</el-form-item>
		</el-form>
		<div class="tableListOperator">
			<div class="leftBtns">
				<el-button
					type="primary"
					size="small"
					icon="el-icon-download"
					@click="handleExport"
					>导出</el-button
				>
				<el-button
					size="small"
					icon="el-icon-upload2"
					plain
					@click="handleImport"
					>批量导入</el-button
				>
				<el-button
					size="small"
					icon="el-icon-user"
					plain
					@click="approval"
					>积分审批</el-button
				>
			</div>
			<div class="rightBtns">
				<el-button size="small" plain>重置</el-button>
				<el-button type="primary" size="small" icon="el-icon-search"
					>查询</el-button
				>
			</div>
		</div>
		<el-table :data="list" style="width: 100%" v-loading="loading">
			<el-table-column
				label="排名"
				type="index"
				width="50"
				align="center"
			>
			</el-table-column>
			<el-table-column prop="name" label="姓名" align="center">
			</el-table-column>
			<el-table-column prop="zz" label="组织名称" align="center">
			</el-table-column>
			<el-table-column prop="jf" label="积分" align="center">
				<template slot-scope="{ row }">
					<div>
						19.0 (系统积分:
						<span style="color: red">19.0</span> 申报积分:<span
							style="color: red"
							>0.0</span
						>)
					</div>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center">
				<template slot-scope="{ row }">
					<div
						style="
							display: flex;
							align-items: center;
							justify-content: center;
						"
					>
						<el-button type="text" @click="shenBao(row)"
							>积分申报</el-button
						>
						<el-divider direction="vertical"></el-divider>
						<el-button type="text" @click="mingXi(row)"
							>积分明细</el-button
						>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<pagination
			v-show="ruleForm.total > 0"
			:total="ruleForm.total"
			:page.sync="ruleForm.pageNum"
			:limit.sync="ruleForm.pageSize"
			@pagination="() => {}"
		/>
		<el-dialog title="导入" :visible.sync="showimport" width="600px">
			<div
				class="btns"
				style="
					display: flex;
					justify-content: space-around;
					margin-bottom: 16px;
				"
			>
				<el-button @click="templateDownload" icon="el-icon-download"
					>模板下载</el-button
				>
				<el-upload action>
					<el-button icon="el-icon-upload2" plain>文件上传</el-button>
				</el-upload>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="showimport = false">关闭</el-button>
			</span>
		</el-dialog>
		<el-dialog title="积分审批" :visible.sync="showdialog" width="1200px">
			<el-form
				:model="dialogForm"
				label-width="80px"
				label-position="right"
			>
				<el-row :gutter="30">
					<el-col :span="8">
						<el-form-item label="申报时间">
							<el-date-picker
								v-model="dialogForm.date"
								type="daterange"
								range-separator="~"
								start-placeholder="开始时间"
								end-placeholder="结束结束时间"
								style="width: 100%"
							>
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="积分分类">
							<el-select
								v-model="dialogForm.type"
								placeholder="请选择"
								style="width: 100%"
							>
								<el-option
									label="支部积分"
									value="1"
								></el-option>
								<el-option
									label="系统积分"
									value="2"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="年份">
							<el-select
								v-model="dialogForm.year"
								placeholder="请选择"
								style="width: 100%"
							>
								<el-option label="2024" value="1"></el-option>
								<el-option label="2023" value="2"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="30">
					<el-col :span="8">
						<el-form-item label="申报对象">
							<el-input
								v-model="dialogForm.obj"
								placeholder="请输入申报对象"
							/> </el-form-item
					></el-col>
				</el-row>
			</el-form>

			<div class="tableListOperator">
				<div class="leftBtns"></div>
				<div class="rightBtns">
					<el-button size="small" plain>重置</el-button>
					<el-button type="primary" size="small" icon="el-icon-search"
						>查询</el-button
					>
				</div>
			</div>
			<div class="tableListOperator">
				<div class="leftBtns">
					<el-button size="small" plain icon="el-icon-circle-close"
						>批量驳回</el-button
					>
				</div>
				<div class="rightBtns"></div>
			</div>
			<el-table
				:data="dialoglist"
				style="width: 100%"
				v-loading="dialogloading"
			>
				<el-table-column prop="name" label="申报时间" align="center" />
				<el-table-column prop="name" label="申报对象" align="center" />
				<el-table-column prop="name" label="所属组织" align="center" />
				<el-table-column prop="name" label="积分分类" align="center" />
				<el-table-column prop="name" label="积分内容" align="center" />
				<el-table-column prop="name" label="申报周期" align="center" />
				<el-table-column prop="name" label="分制" align="center" />
				<el-table-column prop="name" label="积分上限" align="center" />
				<el-table-column prop="name" label="当前分数" align="center" />
				<el-table-column prop="name" label="申报分数" align="center" />
				<el-table-column prop="name" label="核定分数" align="center" />
				<el-table-column label="操作" align="center">
					<template slot-scope="{ row }"> </template>
				</el-table-column>
			</el-table>
		</el-dialog>
		<el-dialog :title="shenbaotitle" :visible.sync="shenbao"></el-dialog>
		<el-dialog :title="mingxititle" :visible.sync="mingxi">
			<el-tabs v-model="activeName" @tab-click="mingxiTabChange">
				<el-tab-pane label="系统积分" name="xitong" />
				<el-tab-pane label="申报积分" name="shenbao" />
			</el-tabs>
			<div class="tableListOperator">
				<div class="leftBtns">
					<el-button
						v-if="activeName === 'xitong'"
						type="primary"
						size="small"
						icon="el-icon-download"
						@click="listExport"
						>导出</el-button
					>
				</div>
				<div class="rightBtns">
					总积分30.0积分（{{
						activeName === 'xitong' ? '系统' : '申报'
					}}积分{{ activeName === 'xitong' ? '30.0' : '0' }}积分）
				</div>
			</div>
			<el-table
				:data="xitongList"
				style="width: 100%"
				v-show="activeName === 'xitong'"
			>
				<el-table-column label="积分原因" />
				<el-table-column label="积分类型" />
				<el-table-column label="积分规则" />
				<el-table-column label="积分来源" />
				<el-table-column label="获得时间" />
				<el-table-column label="积分" />
			</el-table>

			<el-table
				:data="shenbaoList"
				style="width: 100%"
				v-show="activeName === 'shenbao'"
			>
				<el-table-column label="积分规则" />
				<el-table-column label="申报时间" />
				<el-table-column label="申报周期" />
				<el-table-column label="原积分" />
				<el-table-column label="申报分数" />
				<el-table-column label="当前积分" />
				<el-table-column label="原因" />
			</el-table>
		</el-dialog>
	</div>
</template>
<script>
export default {
	data() {
		return {
			loading: false,
			list: [{ name: '周智超', zz: '中共兴平市组织部党委', jf: '19' }],
			form: {},
			ruleForm: {
				pageNum: 1,
				pageSize: 10,
				total: 0,
				year: 2024,
				month: null,
				ranking: 1,
			},
			yearList: [
				{
					label: '2024',
					value: 2024,
				},
				{
					label: '2023',
					value: 2023,
				},
				{
					label: '2022',
					value: 2022,
				},
				{
					label: '2021',
					value: 2021,
				},
				{
					label: '2020',
					value: 2020,
				},
			],
			monthList: [
				{
					label: '全部',
					value: null,
				},
				{
					label: '1月',
					value: 1,
				},
				{
					label: '2月',
					value: 2,
				},
				{
					label: '3月',
					value: 3,
				},
				{
					label: '4月',
					value: 4,
				},
				{
					label: '5月',
					value: 5,
				},
				{
					label: '6月',
					value: 6,
				},
				{
					label: '7月',
					value: 7,
				},
				{
					label: '8月',
					value: 8,
				},
				{
					label: '9月',
					value: 9,
				},
				{
					label: '10月',
					value: 10,
				},
				{
					label: '11月',
					value: 11,
				},
				{
					label: '12月',
					value: 12,
				},
			],
			showimport: false,
			showdialog: false,
			dialogForm: {},
			dialoglist: [],
			dialogloading: false,
			shenbao: false,
			shenbaotitle: '',
			mingxi: false,
			mingxititle: '',
			activeName: 'xitong',
			xitongList: [],
			shenbaoList: [],
		}
	},
	methods: {
		handleSizeChange() {},
		handleCurrentChange() {},
		handleExport() {},
		handleImport() {
			this.showimport = true
		},
		templateDownload() {},
		approval() {
			this.showdialog = true
		},
		shenBao(row) {
			this.shenbaotitle = `${row.name}的积分调整`
			this.shenbao = true
		},
		mingXi(row) {
			this.mingxititle = `${row.name}的积分明细`
			this.mingxi = true
		},
		mingxiTabChange(tab, e) {
			console.log(tab, e)
		},
		listExport() {},
	},
}
</script>

<style lang="scss" scoped>
.ruleForm {
	margin-bottom: 14px;
	::v-deep .el-form-item {
		width: 32.5%;
		// margin-right: 0;
		margin-bottom: 10px;
	}
	::v-deep .el-form-item__content {
		width: calc(100% - 80px);
		.el-select {
			width: 100%;
		}
	}
}
</style>
